/**
 * Created by showtan on 2019/1/27.
 * 注册/忘记密码
 */


export default class RegisterScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.isUpdate ? '修改密码' : navigation.state.params.isForget ? '忘记密码' : '注册'
  });
  constructor(props) {
    super(props);
    this.state = {
      phone: '', // 手机号
      code: '', // 验证码
      password: '', // 密码
      surePassword: '', // 确认密码
      loading: false,
    }
  }
  _getCode = (callback) => { // 获取验证码
    if (!Regular.phone(this.state.phone)) {
      Toast.fail('手机号不正确！');
    } else {
      Toast.success('验证码发送成功！');
    }
  }
  _register = (componentRef, animationType) => { // 注册
    componentRef.setNativeProps({ style: { zIndex: 1 } });
    componentRef.animate(animationType, 500).then(() => {
      componentRef.setNativeProps({ style: { zIndex: 0 } });
    });
    if (!Regular.phone(this.state.phone)) {
      Toast.fail('手机号不正确！');
    } else if (!Regular.password(this.state.password)) {
      Toast.fail('密码不正确！');
    } else if (!Regular.checkcode(this.state.code)) {
      Toast.fail('验证码不正确！');
    } else if (this.state.password != this.state.surePassword) {
      Toast.fail('前后密码不一致！');
    } else {
      this.setState({ loading: true });
      this.timer = setTimeout(() => { this.setState({ loading: false }); this.props.navigation.goBack(); Toast.success('注册成功！'); }, 1500);
      // this.props.dispatch({ type: 'user/login', payload: { phone: this.state.phone, password: this.state.password } });
    }
  }
  render() {
    let isRegister = this.props.navigation.state.params.isRegister;
    let regInformationData = [ // 手机号、验证码、密码、确认密码
      { placeholder: '请输入手机号', secureTextEntry: false, keyboardType: 'numeric', changeFunc: (phone) => this.setState({ phone }), value: this.state.phone, clearFunc: () => this.setState({ phone: '' }) },
      { placeholder: '请输入验证码', secureTextEntry: false, keyboardType: 'numeric', changeFunc: (code) => this.setState({ code }), value: this.state.code, clearFunc: () => this.setState({ code: '' }) },
      { placeholder: '请输入密码', secureTextEntry: true, keyboardType: 'default', changeFunc: (password) => this.setState({ password }), value: this.state.password, clearFunc: () => this.setState({ password: '' }) },
      { placeholder: '请确认密码', secureTextEntry: true, keyboardType: 'default', changeFunc: (surePassword) => this.setState({ surePassword }), value: this.state.surePassword, clearFunc: () => this.setState({ surePassword: '' }) }
    ];
    return <View style={styles.container}>
      <KeyboardAwareScrollView keyboardShouldPersistTaps='always' showsVerticalScrollIndicator={false}>
        <Image source={Images.other.icon_logo} style={styles.loginStyle} />
        {/* 注册需填信息 */}
        {regInformationData.map((item, index) =>
          <View key={index}>
            <TextInput placeholder={item.placeholder} keyboardType={item.keyboardType}
              selectionColor={themeColor} secureTextEntry={item.secureTextEntry}
              underlineColorAndroid='transparent' maxLength={25}
              style={styles.textInputStyle}
              onChangeText={item.changeFunc} value={item.value} />
            {/* 清除text */}
            {index != 1 && item.value.length > 0 && <TouchableOpacity style={styles.clearTextCell} onPress={item.clearFunc}>
              <Image source={Images.other.icon_guanbi} style={{ width: adapt(15), height: adapt(15), tintColor: '#8f8e93' }} />
            </TouchableOpacity>}
            {/* 验证码 */}
            {index == 1 && <CheckButton isShow={index == 1} onClick={this._getCode} ref='button' delay={60} btnStyle={styles.btnStyle} />}
          </View>)}
        {/* 协议 */}
        {isRegister && <View style={{ marginHorizontal: adapt(25), marginTop: adapt(13), alignItems: 'center', flexDirection: 'row' }}>
          <TouchableOpacity onPress={() => this.setState({ isAgree: !this.state.isAgree })} activeOpacity={.6} style={styles.isAgreeCell}>
            <View style={[styles.isAgreeStyle, this.state.isAgree && { backgroundColor: themeColor }]} />
          </TouchableOpacity>
          <Text onPress={() => { }} style={{ fontSize: adapt(10), color: '#4a4a4a', marginLeft: adapt(5) }}>我已阅读并同意《版权声明》及《免责条款》</Text>
        </View>}
        {/* 注册 */}
        <AnimationCell animationType='pulse' text={isRegister ? '注册' : '提交'} style={styles.regStyle}
          textStyle={{ marginTop: -1, color: '#fff', paddingVertical: adapt(5) }} onPress={this._register} />
      </KeyboardAwareScrollView>
      {/* 已注册，登录 */}
      {isRegister && <View style={styles.regBottomCell}>
        <Text style={{ fontSize: adapt(10), color: '#9B9B9B' }}>您已经注册过了？</Text>
        <Text onPress={() => this.props.navigation.goBack()} style={{ fontSize: adapt(10), color: themeColor }}>点击这里登录</Text>
      </View>}
      {/* 缓冲modal */}
      <Modal transparent={true} visible={this.state.loading} onRequestClose={() => { }}>
        <View style={{ width: width, height: height, justifyContent: 'center', alignItems: 'center' }}>
          <Spinner isVisible={true} size={50} type='Circle' color={themeColor} />
        </View>
      </Modal>
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  loginStyle: {
    width: adapt(120),
    height: adapt(120),
    marginLeft: (width - adapt(120)) / 2,
    marginVertical: isIphoneX() ? adapt(40) : adapt(30)
  },
  textInputStyle: {
    width: width - adapt(30),
    marginLeft: adapt(15),
    height: adapt(48),
    fontSize: adapt(12),
    paddingLeft: adapt(10),
    borderBottomWidth: adapt(2),
    borderColor: '#efefef'
  },
  clearTextCell: {
    position: 'absolute',
    top: adapt(15.5),
    right: adapt(25)
  },
  btnStyle: {
    position: 'absolute',
    top: adapt(13),
    right: adapt(25)
  },
  regStyle: {
    marginTop: adapt(25),
    width: adapt(120),
    height: adapt(50),
    marginLeft: (width - adapt(120)) / 2,
    backgroundColor: themeColor,
    borderRadius: adapt(5),
    alignItems: 'center',
    justifyContent: 'center',
    shadowOffset: { width: 2, height: 2, },
    shadowColor: '#D6D9DE',
    shadowOpacity: .3,
    elevation: 2,
    shadowRadius: 4
  },
  isAgreeCell: {
      width: adapt(15),
      height: adapt(15),
      borderColor: themeColor,
      borderWidth: adapt(1),
      borderRadius: adapt(7.5),
      justifyContent: 'center',
      alignItems: 'center'
  },
  isAgreeStyle: {
      width: adapt(11),
      height: adapt(11),
      borderRadius: adapt(5.5),
      backgroundColor: '#fff'
  },
  regBottomCell: {
    flexDirection: 'row',
    justifyContent: 'center',
    position: 'absolute',
    bottom: isIphoneX() ? adapt(20) : adapt(10),
    left: 0,
    width: width
  },
});